<template>
  <view style="background-color: #fefefe;">
    <view>
      <view class="page_top2" :style="{
        background: topNav ? 'white' : 'transparent',
        'z-index': 199,
      }">
        <top-status></top-status>
        <view class="tabsBack">
          <view @click="goBack()" class="blackbox">
            <uni-icons :color="topNav ? 'black' : '#111'" type="left" size="24"></uni-icons>
          </view>
          <view class="topTitle hiddenText" v-show="topNav">{{ reqData.TeamName ?
            $util.entitiesToUtf16(reqData.TeamName) : '' }}</view>
        </view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
      <!-- 背面 -->
      <view class="backView" :style="[{ 'padding-top': topheight + 'px' }]">
        <view class="bglogo">
          <view class="bglImg">
            <image :src="'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1736997418284275.png' || reqData.Logo" mode="widthFix" />
            <!-- <view class="darken-mask"></view> -->
          </view>

        </view>

        <view class="bvContent">
					<!--  @click="seeBGImg(reqData.Logo)" -->
          <view style="width:100%;position: relative;">
            <view class="bvLogo">
              <image class="bvLogoImg" :src="reqData.Logo" mode="aspectFill" />
            </view>
            <view class="bvTitle">{{ reqData.TeamName ? $util.entitiesToUtf16(reqData.TeamName) : '' }}</view>
            <view class="bvRemark">{{ reqData.Tips ? $util.entitiesToUtf16(reqData.Tips) : '' }}</view>
						
						<view class="bv_btn">
							<block v-if="reqData.IsTeamAdmin == 1">
								<view class="bvadd" @click.stop="nav_to('/pages/together/cir_edit?id=' + cirID)">编辑圈子</view>
								<view class="bvadd" v-if="reqData.Status == 1" @click.stop="nav_to('/pages/ball/ball_add?golfType=0&id=' + reqData.ID)">发布活动</view>
								<block v-else>
									<view class="bvadd bv_warm" v-if="reqData.Status == 0">审核中</view>
									<view class="bvadd bv_err" v-else>未通过</view>
								</block>
							</block>
							
							<block v-else>
								<view class="bvadd bv_gray" v-if="reqData.IsJoin == 1" @click="quitTeam(reqData)">已加入</view>
								<view class="bvadd" v-else @click="JoinTeam(reqData.ID)">加入圈子</view>
							</block>
							
						</view>
          </view>
					
					<view class="bvTagsBox">
					  <block v-if="reqData.Tag">
					    <view class="bvtCell" v-for="(item, index) in setTagData" :key="index">
					      {{ item.name }}
					    </view>
					  </block>
					</view>

          <view class="bvInformation">
            <view class="bvNumBox">
              <view class="bvNumCell">
                <view class="bvnNum">{{ temaHotValue }}</view>
                <view class="bvnName">人气值</view>
              </view>
              <view class="bvNumCell">
                <view class="bvnNum">{{ temaBrowserNum }}</view>
                <view class="bvnName">浏览</view>
              </view>
              <view class="bvNumCell"
                @click="nav_to('/pages/together/cir_member?id=' + reqData.ID + '&IsTeamuser=' + IsTeamuser)">
                <view class="bvnNum">{{ reqData.MemberNum }}</view>
                <view class="bvnName">成员</view>
              </view>
            </view>
            
          </view>
          
          <view class="bvContentBox" style="margin: 45rpx 0 4rpx;">
            <view class="bvcTitle">圈子介绍</view>
            <view class="bvcBRight">
              <view class="cityIcon">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17370112486751311.png" mode="widthFix" />
              </view>
              <view class="bvcText-city">{{ reqData.City ? reqData.City : '' }}</view>

            </view>
          </view>
					<view class="bvCdescBox">
					  {{ reqData.Descript ? $util.entitiesToUtf16(reqData.Descript) : '' }}
					
					</view>
          <view class="bvContentBox" style="margin:54rpx 0 32rpx;">
            <view class="bvcTitle">圈子成员</view>
            <view class="bvcBRight" @click="nav_to('/pages/together/cir_member?id=' + reqData.ID+ '&IsTeamuser=' + IsTeamuser)">
              <view class="bvcText-user">{{ reqData.MemberNum + '成员' }}</view>
              <view class="arrowIcon">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1737012024741461.png" mode="widthFix" />
              </view>
            </view>
          </view>
          <view class="bvUserBox">
            <view  style="width: 100%;height:150rpx;">
              <view class="bvUserList">
                <block v-for="(item, index) in userList" :key="index">
                  <view class="bvuCell" @click.stop="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
                    <view class="bvuHead">
                      <image class="bvLogoImg" :src="item.HeadImgUrl" mode="aspectFill" />
                    </view>
                    <view class="bvuName hiddenText">{{ $util.entitiesToUtf16(item.Name) }}</view>
                  </view>
                </block>
								
								
              </view>
            </view>
          </view>
         

        </view>
      </view>
      <!-- 可滑动页面 -->
      <!-- <view class="bgBox"> -->
      <you-touchbox ref="touchBox" :disable="isTouchDisable" @get-end-detail="getEndDetail" :initTop="0.35" maxTop=".88"
        minTop="160" customStyle="border-radius:32rpx 32rpx 0 0;background: #fff;box-shadow: 0 0 30rpx #ccc;">
        <view style="padding: 0 24rpx;display: flex;flex-direction: column;height: 100%;" @click.stop>
          <view class="topTab">
            <block v-for="(item, index) in tabList" :key="index">
              <view class="tabTitle" :class="{ tabTitleIng: nowTab == index }" @click.stop="chooseTab(index)">{{
                item.title }}{{ item.num > 0 ? `(${item.num})` : '' }} </view>
            </block>
          </view>
          <scroll-view :scroll-y="true" style="flex: 1;height:1px;" @scrolltolower="lowermore">
            <!-- 一起挥 -->
            <block v-if="nowTab == 0">
              <view class="actconBoxList">
                <block v-if="actList.length > 0">
                  <block v-for="(item, index) in actList" :key="index">
                    <ActivityCell :item="item"></ActivityCell>
                  </block>
                </block>
                <view class="empty" v-else>
                  <u-empty mode="list" width="100" height="100"
                    icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
                    iconSize="32" text="暂无活动"></u-empty>
                </view>
              </view>
            </block>
            <!-- 圈友动态 -->
            <block v-if="nowTab == 1">
              <view class="album">
                <view class="albumTitle" v-if="reqData.IsJoin == 1">
                  <view class="puadd" @click="nav_to('/pages/dynamic/dynamic_add')">
                    <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png" mode="aspectFill">
                    </image>
                    <view class="putitle">发布</view>
                  </view>
                </view>

                <!-- <view class="blackimg"></view> -->
                <view v-if="dynamicList.length > 0">
									<block v-for="(item, index) in dynamicList" :key="index">
										<view class="list wap" :class="item.Sex=='男'?'listB':'listG'">
										  <view class="userbox" @click.stop="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
										    <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
										    <view class="middbox">
										      <view class="name">{{
										        $util.entitiesToUtf16(item.Name)
										      }}
										        <image v-if="item.UserType != '普通用户'" mode="widthFix"
										          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
										      </view>
										      <view class="daybox">
										        <text class="Birthday">{{ getYearStr(item.Birthday) == '未知' ? '00后' :
										          getYearStr(item.Birthday)
										          + '后'
										          }}</text>
										        <!-- <text class="borderLine">|</text>
										<text class="city" v-if="item.City">{{
										  item.City
										}}</text> -->
										      </view>
										    </view>
										    <view class="time">
										      {{ getTime(item.CreateTime) }}
										    </view>
										  </view>
										  <view v-if="item.Content" class="content diyC">
										    {{ $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;") }}
										  </view>
										  <Layoutimg v-if="item.IsVideo === 0" :item="item" :ossWatermark="ossWatermark" style="width: 95%;"></Layoutimg>
										  <view  class="video_box" v-else @click.stop="">
										    <video :id="'video'+index"  style="position: relative;" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
										      '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
										      " @play="videoPlay(index)">
										      </video>
										  </view>
										  <view class="ft_btn">
										    <view class="citybottom">
										      {{ item.City ? item.City : '' }}
										    </view>
										    <view class="buttonbox" :class="{ boxWidth: userid == ID }">
										      <view class="zan" v-if="userid == ID" @click="del(item.ID)">
										        <uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
										      </view>
										      <view class="zan" @click="zan(item.ID)">
										        <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
										        <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
										        <text>{{
										          item.CommunityZAN.length > 0 ? item.CommunityZAN.length : ""
										        }}</text>
										      </view>
										      <view class="zan" @click="tocommit(item.ID, 0)">
										        <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
										        <text>{{
										          item.CommunityComments.length > 0
										            ? item.CommunityComments.length
										            : ""
										        }}</text>
										      </view>
										      <!-- <view class="zan"> -->
										      <!-- #ifdef MP-WEIXIN -->
										      <!-- <button hover-class="none" open-type="share" :data-id="item.ID">
											<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
										</button> -->
										      <!-- #endif -->
										      <!-- #ifdef APP-PLUS -->
										      <!-- <button hover-class="none" @click="app_share(item)">
											<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
										</button> -->
										      <!-- #endif -->
										      <!-- </view> -->
										    </view>
										  </view>
										  <view v-if="item.CommunityComments.length > 0" class="Commbox">
										    <view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
										      <view class="comment" @click.stop="comment_edit(index, c_index, value.Name)"
										        v-if="value.ReplyID > 0">
										        <text>
										          <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
										            $util.entitiesToUtf16(value.Name) }}</text>
										          <text class="reviewC">回复</text>
										          <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.Pre_UserID)"> {{
										            $util.entitiesToUtf16(value.Pre_Name) }}:</text>
										        </text>
										        <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
										      </view>
										      <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-else>
										        <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
										          $util.entitiesToUtf16(value.Name) }}:</text>
										        <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
										      </view>
										    </view>
										  </view>
										</view>
									</block>
                  
                </view>
                <view class="empty" v-else>
                  <u-empty mode="list" width="100" height="100"
                    icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
                    iconSize="32" text="暂无动态"></u-empty>
                </view>
              </view>

            </block>
            <!-- 原圈子介绍 -->
            <!-- <block v-if="nowTab == 2">
              <view class="contentDesc">
                {{ reqData.Descript ? $util.entitiesToUtf16(reqData.Descript) : '' }}
              </view>

            </block> -->

          </scroll-view>
          <view style="width:100%" :style="[{ 'height': topheight + 58 + 'px' }]"></view>
        </view>

      </you-touchbox>
      <!-- </view> -->
    </view>
    <inputBox :commit="commit2" @submit="submit" @onBlur="onBlur"></inputBox>
  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    topStatus,
    inputBox,
    ActivityCell
  },
  data() {
    return {
      IsTeamuser: 0, // 是否是圈主
      cirID: '', // 圈子ID
      reqData: {},
      topNav: false,
      load: false,
      isTouchDisable: false, // 是否禁用滑动
      nowTab: 0,//当前选中的tab
      topheight: 176,//顶部导航栏高度
      dynamicList: [],
      PageIndex: 1,
      PageSize: 30,
      commit2: false,
      review_id: 0,
      comment_id: 0,
      zan_id: 0,
      repName: "",
      userid: null,
      user: {},
      actList: [],
      tabList: [
        {
          title: '圈子活动',
          num: 0,
        },
        {
          title: '圈友动态',
          num: 0,
        },
        // {
        //   title: '圈子介绍',
        //   num: 0,
        // },
      ],
      tagsStyle: [
        {
          color: '#58ABFF',
          bgColor: '#2A3747',
        },
        {
          color: '#5EEC87',
          bgColor: '#264139',
        },
        {
          color: '#FF5684',
          bgColor: '#372A34',
        },
        {
          color: '#FF9241',
          bgColor: '#3E3731',
        },
        {
          color: '#A88AFF',
          bgColor: '#302A3D',
        },
        {
          color: '#FF92CE',
          bgColor: '#44363F',
        },
      ],
      userList: [],//圈子成员
      huiNum: 1,//加入圈子所需积分
			
			teamObj:{}
    };
  },
  computed: {
    setTagData() {
      if (!this.reqData.Tag) {
        return []
      }
      let list = this.reqData.Tag.split(',') || []
      let newList = []
      for (let i = 0; i < list.length; i++) {
        let index = Math.floor(Math.random() * 7);
        newList.push({
          name: list[i],
          style: this.tagsStyle[index]
        })
      }
      return newList
    },
    temaBrowserNum() {
      if (this.reqData.BrowserNum > 99999999) {
        return (this.reqData.BrowserNum / 100000000).toFixed(1) + '亿'
      } else if (this.reqData.BrowserNum > 9999) {
        return (this.reqData.BrowserNum / 10000).toFixed(1) + 'W'
      } else {
        return this.reqData.BrowserNum
      }
    },
    temaHotValue() {
      if (this.reqData.HotValue > 99999999) {
        return (this.reqData.HotValue / 100000000).toFixed(1) + '亿'
      }
      else if (this.reqData.HotValue > 9999) {
        return (this.reqData.HotValue / 10000).toFixed(1) + 'W'
      } else {
        return this.reqData.HotValue
      }
    },
  },
  async onShow() {
    this.cirDetail()
    this.TeamUsers()
  },
  async onLoad(e) {
    this.cirID = e.id
		this.init()
  },
  // // 触底事件
  // onReachBottom() {
  //   this.PageIndex++
  //   if (index == 0) {
  //     this.getActList()
  //   } else if (index == 1) {
  //     this.getDynamicList()
  //   }
  // },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > this.lastScrollTop) {
      // 向下滚动
      if (e.scrollTop >= 80) {
        this.topNav = true; // 你的逻辑
      }
      this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
    } else {
      // 向上滚动
      if (e.scrollTop < 80) {
        this.topNav = false; // 你的逻辑
      }
    }
    this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
  },
  onShareAppMessage(e) {

  },
  //分享朋友圈
  onShareTimeline() {

  },
  methods: {
		async init(){
			this.getJoinNum()
			this.getTopHight()
			await this.getCity();
			this.cirDetail()
			this.getJoinTeam()
			this.TeamUsers()
			this.userid = uni.getStorageSync("user").UserID;
			this.user = uni.getStorageSync("user")
			this.getUserInfo()
			this.chooseTab(this.nowTab)
		},
		async getUserInfo() {
			let u = uni.getStorageSync('user');
			let res = await this.$api.post('User/GetUserInfo', {
				ID: u.UserID,
			});
		
			this.user = res.data;
			uni.setStorageSync('user', this.user);
		
			this.$store.commit('setUser', this.user);
		
		},
    //视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.dynamicList.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
    // 获取加入圈子需要多少积分
    async getJoinNum() {
      let res = await this.$api.post("Common/GetServerPrice", {
        Item: '加入圈子'
      })
      if (res.code == 0) {
        this.huiNum = res.data.Score || 0
      }
    },
		async getJoinTeam(){
			let res = await this.$api.post('Team/JoinTeam',{
				ID:this.cirID
			})
			this.teamObj = res.data
		},

    //加入圈子
    async JoinTeam(id) {
      let _this = this
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
      } else if(this.reqData.IsJoinFee==1){
				let _this = this;
				let tips = this.user.Sex=='男' ? '￥'+this.reqData.Men_Fee : '￥'+this.reqData.Women_Fee 
				uni.showModal({
					title: "加入圈子",
					content: "加入圈子费用为" + tips,
					confirmText: "确定",
					success: async (res)=> {
						if (res.confirm) {
							let pres = await this.$api.post("Payment/PayV2", {
							  ...this.teamObj,
								SourcePage:'',
							  // #ifdef MP-WEIXIN
							  PayChannel: "weixin",
							  // #endif
							  // #ifdef APP
							  PayChannel: "app",
							  // #endif
							});
							// 已余额支付成功
							if (pres.data == 0) {
							  // isPay = true;
							} else {
							  // 支付成功返回的内容
							  let payObj = JSON.parse(pres.data);
							  // 调用uni支付API
							  uni.requestPayment({
							    // 服务提供商
							    provider: "wxpay",
							    // #ifdef APP
							    orderInfo: payObj,
							    // #endif
							    // #ifdef MP-WEIXIN
							    timeStamp: payObj.timeStamp,
							    nonceStr: payObj.nonceStr,
							    package: payObj.package,
							    signType: payObj.signType,
							    paySign: payObj.paySign,
							    // #endif
							    success(res) {
										_this.$pv.msg('加入成功，请等待审核~');
							      _this.init()
							    },
							    fail(err) {
							      _this.$pv.msg("支付失败");
							    },
							  });
							}
						} else if (res.cancel) {
						}
					},
				});
				
			}	else {
        uni.showModal({
          title: "温馨提示",
          content: `您确定要加入该圈子吗？`,
          confirmText: "确定",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post("Team/JoinTeam", {
                ID: id
              })
              if (res1.data) {
                _this.$pv.msg(res1.message || '加入成功，请等待审核~');
                // _this.reqData.IsJoin = 1
              } else {
                _this.$pv.msg(res1.message);
              }
							this.init()
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    // 退出圈子
    quitTeam(item) {
      let _this = this;
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
        return
      }
      if (item.IsTeamAdmin == 1) {
        _this.$pv.msg("圈主无法退出");
        return
      }
      uni.showModal({
        title: "温馨提示",
        content: "您确定要退出该圈子吗？",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post("Team/Quit", {
              TeamID: item.ID
            })
            if (res1.data) {
              _this.$pv.msg("退出成功");
              _this.reqData.IsJoin = 0
            } else {
              _this.$pv.msg(res1.message);
            }
						this.init()
          } else if (res.cancel) {
          }
        },
      });
    },
    //圈子成员
    async TeamUsers() {
      let res = await this.$api.post("Team/TeamUsers", {
        TeamID: this.cirID,
        PageIndex: 1,
        PageSize: 20,
      })
      if (res.code == 0) {
        this.userList = res.data
      }
    },
    //圈子详情
    async cirDetail() {
      let res = await this.$api.post("Team/Detail", {
        ID: this.cirID
      })
      if (res.code == 0) {
        this.reqData = res.data
				
				console.log(JSON.stringify(this.reqData));
        this.load = true
        this.IsTeamuser = res.data.IsTeamAdmin
      }
    },
    // 预览图片
    seeBGImg(img) {
      uni.previewImage({
        urls: [img],
        current: 0,
      });
    },
    // 获取自定义头部高度
    getTopHight() {
      let _this = this;
      uni.getSystemInfo({
        success: res => {
          console.log(res, 'res');
          _this.topheight = res.statusBarHeight + 44;
        },
        fail(err) {
        }
      })
    },
    async getDynamicList() {
      let res = await this.$api.post("Team/TeamCommunity", {
        ID: this.reqData.ID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      });

      let l = this.PageIndex == 1 ? res.data : this.dynamicList.concat(res.data);
      this.dynamicList = this.clearRepetition(l, "ID");
      this.$pv.closeLoad();
    },
    // 去重,后面的覆盖前面的
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });
      return newArr;
    },
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
    getEndDetail({ minTop, maxTop, curTop }) {
      // console.log(minTop, maxTop, curTop);
    },
    lowermore() {
      this.PageIndex++
      if (this.nowTab == 0) {
        this.getActList()
      } else if (this.nowTab == 1) {
        this.getDynamicList()
      }
    },
    // 选择标签
    chooseTab(index) {
      this.nowTab = index
      this.PageIndex = 1
      if (index == 0) {
        this.getActList()
      } else if (index == 1) {
        this.getDynamicList()
      }
    },
    onBlur(emit) {
      setTimeout(() => {
        this.commit2 = emit;
      }, 500)

    },
    // 评论
    async submit(val) {
      if (val != "") {
        let utf16 = this.$util.utf16ToEntities(val).slice(0, 200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        if (res.code == 0) {
          console.log("user====>", res);
          this.dynamicList.forEach((item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID: res.data
              });
              this.dynamicList.splice(index, 1, item);
              console.log(item.ID, this.review_id);
            }
          });

          this.commit2 = !this.commit2;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    // 赞
    async zan(item) {
      this.zan_id = item;
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      let res = await this.$api.post("Community/ZAN", {
        ID: item,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.dynamicList.forEach((item, index) => {
          if (item.ID == this.zan_id) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: this.cache_user.UserID,
              HeadImgUrl: this.cache_user.HeadImgUrl,
            });
            this.dynamicList.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },
    //回复消息
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      _this.repName = Name;
      const user = uni.getStorageSync("user");

      const item = this.dynamicList[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) { },
        });
      } else {
        //直接回复
        this.tocommit(item.CommunityID, item.ID);
      }
    },
    // 评论
    tocommit(ID, C_ID) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.commit2 = !this.commit2;
      this.review_id = ID;
      this.comment_id = C_ID;
    },
    async delReview(index, c_index) {
      const item = this.dynamicList[index].CommunityComments[c_index];

      let res = await this.$api.post("/Community/DeletePage", {
        ID: item.ID,
      });
      this.$pv.msg("删除成功");
      this.$store.commit('changeRefresh', true)
      this.dynamicList[index].CommunityComments.splice(c_index, 1);
    },
    // 获取一起挥列表
    async getActList() {
      let res = await this.$api.post("Team/TeamParty", {
        TeamID: this.cirID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      })
      // let res = await this.$api.post("Appointment/PageList", {
      //   PageIndex: this.PageIndex,
      //   PageSize: this.PageSize,
      //   Appointment: '一起挥',
      //   User_Lng: this.longitude,
      //   User_Lat: this.latitude,
      // })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.actList = res.data
        } else {
          this.actList = this.actList.concat(res.data)
        }
				let nowtime = Date.now();
				this.actList.forEach(item=>{
					item.TagList = item.PlaceType.includes(",") ? item.PlaceType.split(",") : [item.PlaceType];
					let start = item.ServerDate.split('T')[0]+ 'T' +item.ServerTime
					let end = (new Date(start)).getTime()
					if(nowtime>end){
						item.IsEnd = true 
					}else{
						item.IsEnd = false
					}
				})
      }

    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
  },
};
</script>

<style lang="scss">
page {
  // background: #fefefe;
  background: #0f1318;
}
.video_box {
  width: 100%;
  height: 500rpx;
  position: relative;
  z-index: 2;
  margin-top: 10rpx;
  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
}
.load {
  width: 100%;
  height: 100vh;
  background: white;
}

view {
  box-sizing: border-box;
}


.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 12rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 450rpx;
			overflow: hidden;  /*超出部分隐藏*/
			white-space: nowrap;  /*禁止换行*/
			text-overflow: ellipsis; /*省略号*/

    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}

.backView {
  position: relative;
  background: #fdf4ff;
  width: 100%;
  padding-bottom: 360rpx;

  .bglogo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;


    .bglImg {
      width: 100%;
      position: relative;

      >image {
        width: 100%;
        height: 100%;
        display: block;
      }

      .darken-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        mix-blend-mode: multiply;
      }
    }


    // z-index: -1;
  }

  .bvContent {
    position: relative;
    width: 100%;
    padding: 0 32rpx;

    .bvLogo {
      width: 100%;
      padding-top: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      

      .bvLogoImg {
        width: 146rpx;
				min-width: 146rpx;
				max-width: 146rpx;
				min-height: 146rpx;
				max-height: 146rpx;
        height: 146rpx;
        display: block;
        border-radius: 50%;
				overflow: hidden;
        // border: 4rpx solid #FFFFFF;
      }
    }
		.bv_btn{
			position: absolute;
			right: 0rpx;
			top: 24rpx;
			.bvadd {
			  width: 144rpx;
			  height: 56rpx;
				margin-bottom: 20rpx;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  background-image: linear-gradient(90deg, #a160e2 0%, #3241f4 100%);
			  border-radius: 28rpx;
			  font-weight: 700;
			  font-size: 24rpx;
			  color: #FFFFFF;
			  // margin-left: 24rpx;
			}
			.bv_gray{
				color: #999;
				background: #e4e4e4;
			}
			.bv_err{
				color: #ff0000;
				background: #d2cfcf;
			}
			.bv_warm{
				background: #ff993f;
				color: #fff;
			}
		}
    .bvTitle {
      width: 100%;
      font-size: 32rpx;
      color: #111;
      font-weight: 700;
      margin-top: 20rpx;
			text-align: center;
    }

    .bvRemark {
			width: 100%;
			font-weight: 700;
			font-size: 26rpx;
			text-align: center;
			color: #111;
			margin-top: 15rpx;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			max-height: 68rpx;
			margin-bottom: 26rpx;
    }

    .bvInformation {
      width: 100%;
      display: flex;
      align-items: center;
			padding: 28rpx 0;
			border-top: 2rpx solid #e7dee9;
			border-bottom: 2rpx solid #e7dee9;
      .bvNumBox {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;

        .bvNumCell {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .bvnNum {
            font-weight: 900;
            font-size: 36rpx;
            color: #111;
						
          }

          .bvnName {
						overflow: hidden;  /*超出部分隐藏*/
						white-space: nowrap;  /*禁止换行*/
						text-overflow: ellipsis; /*省略号*/

            font-weight: 900;
            font-size: 24rpx;
            color: #111;
          }
        }
      }

      .bvnBtnBox {
        display: flex;
        align-items: center;

        .erwBtn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #fff;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;

          >image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }
        }

        .joinBtn {
          min-width: 130rpx;
					padding: 0 8rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #706EEE;
          border-radius: 30rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          margin-left: 24rpx;
					text{
						color: #FFFFFF;
					}
        }

        .quitBtn {
          width: 144rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #E4E4E4;
          border-radius: 30rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
          margin-left: 24rpx;
        }
      }
    }

    .bvTagsBox {
      width: 100%;
      margin-bottom: 34rpx;
      display: flex;
      align-items: center;
			justify-content: center;
      flex-wrap: wrap;

      .bvtCell {
        display: flex;
        justify-content: center;
        align-items: center;
				min-height: 30rpx;
				max-height: 30rpx;
				
        padding:0rpx 10rpx;
        font-weight: 400;
        font-size: 20rpx;
        background: #8087f8;
        color: #fff;
        border-radius: 6rpx;
        margin-right: 6rpx;
        margin-bottom: 6rpx;
      }
    }

    .bvContentBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bvcTitle {
        font-weight: 900;
        font-size: 22rpx;
        color: #111;
      }

      .bvcBRight {
        display: flex;
        align-items: center;
        color: #111;
        font-weight: 500;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }

        .cityIcon {
          width: 18rpx;
          height: 20rpx;
					margin-right: 12rpx;
					display: flex;
					align-items: center;
					justify-content: center;
        }

        .bvcText-city {
          font-size: 22rpx;
					font-weight: 400;
          color: #111;
        }

        .arrowIcon {
					width: 10rpx;
					height: 17rpx;
					margin-left: 12rpx;
					display: flex;
					align-items: center;
        }

        .bvcText-user {
          font-size: 20rpx;
          color: #111;
        }
      }
    }

    .bvUserBox {
      width: 100%;
      overflow: auto;

      .bvUserList {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
				overflow-x: scroll;
        padding-right: 40rpx;

        .bvuCell {
          width: 64rpx;
					min-width: 64rpx;
          margin-right: 34rpx;
					&:last-child{
						margin-right: 0;
					}
          .bvuHead {
						width: 64rpx;
						height: 64rpx;
            min-width: 64rpx;
            min-height: 64rpx;
            border-radius: 50%;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            }
          }

          .bvuName {
						overflow: hidden;  /*超出部分隐藏*/
						white-space: nowrap;  /*禁止换行*/
						text-overflow: ellipsis; /*省略号*/
						margin-top: 12rpx;
            width: 100%;
						min-width: 100%;
            font-weight: 400;
            font-size: 20rpx;
            color: #111;
            text-align: center;
          }
        }
      }
    }

    .bvCdescBox {
      width: 100%;
      font-weight: 500;
      font-size: 22rpx;
      color: #111;
      white-space: pre-wrap;
     
    }

  }

}

.bgBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;


}

.floor-item {
  margin-bottom: 20rpx;
  height: 160rpx;
  border-radius: 50rpx;
  background: rgba(51, 51, 51, 0.3);
  text-align: center;
  background-position: center;
  background-size: cover;
}

.topTab {
  width: 100%;
  display: flex;
  align-items: center;
	justify-content: center;

  .tabTitle {
		flex: 1;
		text-align: center;
		padding: 18rpx 0 34rpx;
    position: relative;
    font-size: 28rpx;
		font-weight: bold;
    color: #999999;
    
  }

  .tabTitleIng {
    font-weight: 900;
    font-size: 28rpx;
    color: #333333;

    &::after {
      position: absolute;
      bottom: 12rpx;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      width: 36rpx;
      height: 10rpx;
      background: #3142f4;
      border-radius: 6rpx;
    }
  }
}

.album {
  padding-bottom: 30rpx;

  .blackimg {
    width: 48rpx;
    height: 8rpx;
    background-color: #0c0c0c;
    border-radius: 5rpx;
    margin-left: 42rpx;
  }

  .hd {
    margin-top: 40rpx;
    font-size: 32rpx;
    line-height: 38rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 36rpx;
  }

  .title_right {
    position: absolute;
    right: 30rpx;
  }

  .list {
    // background: #262626;
    // padding-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
    // margin-top: 8rpx;
    box-sizing: border-box;
    // width: 95%;
    width: 99%;
    margin: 24rpx auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 16rpx;
    box-shadow: 0 0 4rpx #ccc;
    padding: 20rpx;
    box-sizing: border-box;
		&:first-child{
			margin-top: 14rpx;
		}
    .userbox {
      display: flex;
      width: 100%;

      .userimg {
        min-width: 80rpx;
        width: 80rpx;
        height: 80rpx;
        display: block;
        border-radius: 50%;
      }

      .middbox {
        margin-left: 24rpx;
        flex: 1;
        min-width: 424rpx;
        width: 424rpx;

        .name {
          width: 100%;
          font-size: 32rpx;
          color: #333333;
          font-weight: 600;
          display: flex;
          align-items: center;

          >image {
            width: 76rpx;
            margin-left: 10rpx;
          }
        }

        .daybox {
          font-weight: 400;

          .Birthday {
            font-size: 24rpx;
            color: #999999;
            // border-right: 1rpx solid #999999;
            padding: 0 15rpx 0 0;
          }

          .borderLine {
            color: #999999;
            font-size: 24rpx;
          }

          .city {
            font-size: 24rpx;
            color: #999999;
            margin-left: 15rpx;
          }
        }
      }

      .time {
        // margin-left: 268rpx;
        width: 140rpx;
        text-align: right;
        font-size: 24rpx;
        color: #999999;
      }
    }

    &::after {
      content: "";
      display: block;
      height: 1px;
      width: 325rpx;
    }

    .message {
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-avatar {
        height: 80rpx;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 10rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .name {
          margin-left: 10rpx;
          font-size: 15px;
          font-weight: 600;
        }
      }

      .time {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: right;
      }
    }

    .content {
      margin-top: 24rpx;
      margin-bottom: 10rpx;
      font-size: 28rpx;
      color: #7b7b7b;
      width: 100%;
    }

    .diyC {
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      white-space: pre-line;
    }

    .imglist {
      box-sizing: border-box;
      width: 100%;
      margin: 10rpx 0 20rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .img {
        box-sizing: border-box;
        width: 180rpx;
        height: 180rpx;
        margin-top: 20rpx;
        margin-left: 18rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .ft_btn {
      width: 100%;
      margin-bottom: 10rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      // justify-content: space-between;

      .citybottom {
        font-size: 24rpx;
        color: #999999;
      }

      .buttonbox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 140rpx;
        font-size: 26rpx;
        margin-left: auto;

        .zan {
          display: flex;
          align-items: center;
        }
      }

      .boxWidth {
        width: 230rpx;
      }

      button {
        height: 44rpx;
        width: 44rpx;
        // margin-left: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 44rpx;
          width: 44rpx;
        }
      }

      .icon_box {
        height: 48rpx;
        width: 48rpx;
        border-radius: 48rpx;
        background: rgba(255, 255, 255, 0.9);
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 32rpx;
          width: 32rpx;
        }
      }

      .time {
        width: 75%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: left;
      }

      .icon_pad {
        width: 44rpx;
        height: 44rpx;
        padding-left: 25rpx;
        padding-right: 10rpx;
        text-align: left;
      }
    }

  }
	.listG{
		background-image: linear-gradient(180deg, #e7ccfe 0%, #f5d5ec 12%, #fff 20%);
	}
	.listB{
		background-image: linear-gradient(180deg, #adb3fd 0%, #d4c6f7 12%,#fff 20%);
	}

  .empty {
    // background: #fff;
    min-height: 500rpx;
  }

  .item {
    height: 336rpx;
    width: 336rpx;
    margin: 0 2rpx;
    margin-top: 2rpx;

    image {
      height: 100%;
      width: 100%;
      // border-radius: 10rpx;
    }

    &:nth-child(2n + 1) {
      margin-left: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .albumTitle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10rpx 0rpx;
    position: relative;

    .puadd {
		 width: 120rpx;
		 margin-left: 24rpx;
		 height: 50rpx;
		 background-image: linear-gradient(90deg, #a160e2 0%, #3241f4 100%);
		 border-radius: 36rpx;
		 display: flex;
		 align-items: center;
		 justify-content: center;

      .putitle {
        color: #fff;
        font-size: 22rpx;
        font-weight: 400;
      }

      .releaseimg {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.Commbox {
  width: 100%;

  .msgbox {
    // background-color: #f6f6f6;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;

    .comment {
      color: #afafaf;
      font-size: 28rpx;

      word-break: break-all;

      text {
        box-sizing: border-box;
        font-weight: 500;
        font-size: 28rpx;
        color: #5f698b;
        padding-right: 10rpx;
      }

      .reviewC {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        margin: 0 10rpx;
      }

      >text:last-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        word-break: break-all;
        margin-left: 10rpx;
      }
    }
  }
}

.actconBoxList {
  width: 100%;
  padding: 20rpx 20rpx 40rpx 20rpx;
}

.contentDesc {
  font-weight: 500;
  font-size: 30rpx;
  color: #666666;
  white-space: pre-wrap
}
</style>
